<template>
	<view class="login">
		<view class="login-wap">
			<view class="login-left"></view>
			<view class="login-right">
				<view class="login-main">
					<view class="login-title">登陆</view>
					<el-form :model="form" :rules="rules" ref="loginForm" class="el-form login-form">
						<el-form-item prop="username">
							<el-input type="text" placeholder="请输入账号" :prefix-icon="User" v-model="form.username" clearable> </el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input type="password" placeholder="请输入密码" :prefix-icon="Lock" v-model="form.password" :show-password="true"></el-input>
						</el-form-item>
						<el-form-item prop="captcha">
							<el-row style="width: 100%">
								<el-col :span="16">
									<el-input
										maxlength="4"
										placeholder="请输入验证码"
										:prefix-icon="Picture"
										v-model="form.captcha"
										@keyup.enter="submitForm"
										clearable
									></el-input>
								</el-col>
								<el-col :span="8">
									<view class="login-code" @click="clickCaptcha">
										<image class="login-code-img" mode="aspectFill" :src="captchaBase64"></image>
									</view>
								</el-col>
							</el-row>
						</el-form-item>
						<el-form-item style="margin: 40px 0px 0">
							<el-button type="primary" class="login-submit" @click="submitForm" :loading="loading">
								<text>登陆</text>
							</el-button>
						</el-form-item>
					</el-form>
					<view class="login-menu"> </view>
				</view>
			</view>
		</view>
		<view class="vue-particles">
			<Particles id="particles" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded" :options="options" />
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { User, Lock, Picture } from '@element-plus/icons-vue';
import type { FormRules } from 'element-plus';
import { loadFull } from 'tsparticles';
import type { Engine } from 'tsparticles-engine';
import { getCaptcha, login } from '@/uni_modules/dx-admin/api/index';
import { userInfoStore } from '@/uni_modules/dx-admin/stores/user';
import { useRouteStore } from '@/uni_modules/dx-admin/stores/routes';
const useStore = userInfoStore(),
	routeStore = useRouteStore();

const particlesInit = async (engine: Engine) => {
	await loadFull(engine);
};

const particlesLoaded = async (container: any) => {
	console.log('Particles container loaded', container);
};

// 背景动画设置
const options = reactive({
	fpsLimit: 60,
	interactivity: {
		events: {
			onClick: {
				enable: true,
				mode: 'push', // 可用的click模式有: "push", "remove", "repulse", "bubble"。
			},
			onHover: {
				enable: true,
				mode: 'grab', // 可用的hover模式有: "grab", "repulse", "bubble"。
			},
			resize: true,
		},
		modes: {
			bubble: {
				distance: 400,
				duration: 2,
				opacity: 0.8,
				size: 40,
			},
			push: {
				quantity: 4,
			},
			repulse: {
				distance: 200,
				duration: 0.4,
			},
		},
	},
	particles: {
		color: {
			value: '#dedede',
		},
		links: {
			color: '#dedede', // '#dedede'。线条颜色。
			distance: 120, // 线条长度
			enable: true, // 是否有线条
			opacity: 0.5, // 线条透明度。
			width: 1, // 线条宽度。
		},
		collisions: {
			enable: false,
		},
		move: {
			direction: 'none',
			enable: true,
			outMode: 'bounce',
			random: false,
			speed: 4, // 粒子运动速度。
			straight: false,
		},
		number: {
			density: {
				enable: true,
				area: 800,
			},
			value: 100, // 粒子数量。
		},
		opacity: {
			value: 0.5, // 粒子透明度。
		},
		shape: {
			type: 'circle', // 可用的粒子外观类型有："circle","edge","triangle", "polygon","star"
		},
		size: {
			random: true,
			value: 5,
		},
	},
	detectRetina: true,
});

const form = reactive({
	loginType: 'account',
	username: 'test',
	password: '123456',
	captcha: '',
});

const loginForm = ref();

const rules = reactive<FormRules>({
	username: [
		{
			required: true,
			message: '请输入账号',
			trigger: 'blur',
		},
	],
	password: [
		{
			required: true,
			message: '请输入密码',
			trigger: 'blur',
		},
	],
	captcha: [
		{
			required: true,
			message: '请输入验证码',
			trigger: 'blur',
		},
	],
});

let captchaBase64 = ref('');

let loading = ref(false);
// 获取验证码
function clickCaptcha() {
	getCaptcha({ scene: 'login' }).then(({ data, code, message }) => {
		if (code === 1000) {
			captchaBase64.value = data;
		} else {
			ElMessage.error(message);
		}
	});
}
clickCaptcha();

// 登录按钮点击
function submitForm() {
	loginForm.value.validate((valid: boolean) => {
		if (valid) {
			loading.value = true;
			login(form)
				.then((res: any) => {
					loading.value = false;
					if (res.code === 1000) {
						ElMessage.success('登陆成功');
						useStore.setUserInfo(res.data);
						// 获取菜单
						routeStore.getMenuList();
						// 跳转到首页
						uni.reLaunch({
							url: routeStore.homePage,
						});
					} else {
						ElMessage.error(res.message || '登陆失败');
						form.captcha = '';
						clickCaptcha();
					}
				})
				.catch((error) => {
					ElMessage.error(error.message || '登陆失败');
					loading.value = false;
					form.captcha = '';
					clickCaptcha();
				});
		} else {
			return false;
		}
	});
}
</script>

<style lang="scss">
uni-page-body {
	padding: 0;
}
.login {
	height: 100vh;
	width: 100%;
	overflow: hidden;
	display: flex;
	position: relative;

	.vue-particles {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: radial-gradient(ellipse at top left, #2a374a 0%, #2a374a 60%);
	}

	.login-wap {
		margin: auto;
		height: 500px;
		display: flex;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
		border: none;
		box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

		.login-left {
			display: none;
			width: 490px;
			position: relative;
			background-image: url();
			background-size: cover;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
		}

		.login-right {
			width: auto;
			padding: 20px;
			position: relative;
			align-items: center;
			display: flex;
			background-color: rgba(255, 255, 255, 1);
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;

			.login-main {
				margin: 0 auto;
				width: 70%;

				.login-title {
					color: #333;
					margin-bottom: 40px;
					font-weight: 500;
					font-size: 22px;
					text-align: center;
					letter-spacing: 4px;
				}

				.login-form {
					margin: 10px 0;

					.el-form-item {
						margin-bottom: 30px !important;

						.login-code {
							display: flex;
							align-items: center;
							justify-content: space-around;
							margin: 0 0 0 10px;
							user-select: none;

							.login-code-img {
								width: 110px;
								height: 33px;
								// border: 1px solid #dcdfe6;
								color: #333;
								font-size: 14px;
								font-weight: 700;
								letter-spacing: 5px;
								line-height: 38px;
								text-indent: 5px;
								text-align: center;
								cursor: pointer;
								transition: all ease 0.2s;
								border-radius: 4px;

								&:hover {
									border-color: #c0c4cc;
									transition: all ease 0.2s;
								}
							}
						}

						.login-submit {
							width: 100%;
							height: 45px;
							letter-spacing: 2px;
							font-weight: 300;
						}
					}
				}
			}
		}
	}
}
@media (min-width: 700px) {
	.login {
		.login-wap {		
			.login-right {
				width: 500px;
			}
		}
	}
}
@media (min-width: 980px) {
	.login {
		.login-wap {
			.login-left {
				display: block;
			}
			.login-right {
				width: 490px;
			}
		}
	}
}
</style>
